<script setup lang="ts">
import router from "@/router"
import { ref } from "vue"

const checkInDate = ref("2025-09-26")
const checkOutDate = ref("2025-09-27")
const roomSection = ref<HTMLElement | null>(null)

const facilities = [
  "健身房 免费",
  "好味餐厅",
  "私人停车场 免费",
  "充电车位",
  "接驳服务",
  "专车接机",
  "徒步旅行"
]

const roomList = [
  {
    id: 1,
    name: "城际大床房",
    bed: "1张1.8米大床",
    area: "25-28平方米",
    floor: "17-20层",
    wifi: "Wi-Fi免费",
    img1:'images/room1.png',
    prices: [
      { desc: "无早餐 · 可取消", price: 699 },
    ]
  },
  {
    id: 1,
    name: "城际大床房",
    bed: "1张1.8米大床",
    area: "25-28平方米",
    floor: "17-20层",
    wifi: "Wi-Fi免费",
    img1:'images/room1.png',
    prices: [
      { desc: "无早餐 · 可取消", price: 699 },
    ]
  }
]

function scrollToRooms() {
  roomSection.value?.scrollIntoView({ behavior: "smooth" })
}

//跳转到订单确认页面
function toPay(){
  router.push({path:'/toPay'})
}
</script>

<template>
  <div class="page-container">
    <!-- 酒店头部 -->
    <div class="hotel-header">
      <div>
        <h2>上海徐家汇中心城际酒店</h2>
        <div class="address">上海市长宁区中山西路1515号</div>
      </div>
      <div class="right">
        <div class="price">¥699 起</div>
        <button @click="scrollToRooms">选择房间</button>
      </div>
    </div>

    <!-- 酒店图片 -->
    <div class="hotel-images">
      <img src="/images/hotel_1_2.jpg" alt="hotel main" />
      <img src="/images/hotel_1_1.jpg" alt="hotel 1" />
      <img src="/images/hotel_1_3.jpg" alt="hotel 2" />

    </div>

    <!-- 日期选择 -->
    <div class="date-box">
      <label>
        入住：
        <input type="date" v-model="checkInDate" />
      </label>
      <label>
        退房：
        <input type="date" v-model="checkOutDate" />
      </label>
    </div>

    <!-- 酒店设施 -->
    <div class="facilities">
      <h3>酒店设施</h3>
      <div class="facilities-list">
        <span v-for="(item, idx) in facilities" :key="idx">{{ item }}</span>
      </div>
    </div>

    <!-- 房间列表 -->
    <div ref="roomSection" class="room-section">
      <h3>房间选择</h3>
      <div v-for="room in roomList" :key="room.id" class="room-card">
        <div class="room-info">
          <img :src="`${room.img1}`" alt="room" />
          <div class="detail">
            <h4>{{ room.name }}</h4>
            <p>{{ room.bed }}</p>
            <p>{{ room.area }} | {{ room.floor }}</p>
            <p>{{ room.wifi }}</p>
          </div>
        </div>
        <div class="room-prices">
          <div v-for="(p, idx) in room.prices" :key="idx" class="price-row">
            <span class="desc">{{ p.desc }}</span>
            <span class="price">¥{{ p.price }}</span>
            <button @click="toPay">预订</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  background: #f7f8fa;
}

/* 头部 */
.hotel-header {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 20px;
  border-radius: 10px 10px 0 0;
  border: 1px solid #eee;
}

.hotel-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.hotel-header .address {
  font-size: 14px;
  color: #666;
}

.price {
  font-size: 22px;
  color: #e60023;
  font-weight: bold;
}

.hotel-header button {
  background: #0071eb;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin-top: 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.hotel-header button:hover {
  background: #005bb5;
}

/* 图片 */
.hotel-images {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: 150px;
  grid-gap: 6px;
  background: #fff;
  padding: 6px;
  border: 1px solid #eee;
  border-top: none;
}
.hotel-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* 日期选择 */
.date-box {
  background: #fff;
  margin-top: 16px;
  padding: 16px;
  display: flex;
  gap: 20px;
  font-size: 16px;
  border: 1px solid #eee;
  border-radius: 6px;
}
.date-box input {
  padding: 6px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* 酒店设施 */
.facilities {
  background: #fff;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 6px;
}
.facilities h3 {
  margin-bottom: 12px;
}
.facilities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  font-size: 14px;
}

/* 房间 */
.room-section {
  margin-top: 20px;
}
.room-section h3 {
  margin-bottom: 10px;
  font-size: 18px;
}
.room-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 20px;
  overflow: hidden;
}
.room-info {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.room-info img {
  width: 140px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
}
.room-info .detail h4 {
  margin: 0 0 6px 0;
  font-size: 16px;
}
.room-info .detail p {
  margin: 2px 0;
  font-size: 14px;
  color: #666;
}

/* 房价 */
.room-prices {
  display: flex;
  flex-direction: column;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
}
.price-row .desc {
  font-size: 14px;
}
.price-row .price {
  font-size: 18px;
  font-weight: bold;
  color: #e60023;
}
.price-row button {
  background: #0071eb;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
}
.price-row button:hover {
  background: #005bb5;
}
</style>
